<template>
  <div class="register-container">
    <div class="register-wrapper">
      <div class="header">注册</div>
      <el-form 
        :model="registerForm"
        :rules="registerRules"
        ref="registerFormRef"
      >
        <el-form-item prop="username">
          <el-input 
            placeholder="用户名"
            v-model="registerForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input 
            type="password" 
            placeholder="密码"
            v-model="registerForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input 
            type="password" 
            placeholder="确认密码"
            v-model="registerForm.confirmPassword"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input 
            type="email" 
            placeholder="邮箱"
            v-model="registerForm.email"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="doRegister">注册</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import registerApi from '../api'; // 假设这是注册的API
import { useRouter } from 'vue-router'; 

// 假设有一个router对象用于页面导航
// 如果没有，请确保导入并使用正确的router实例
const router = useRouter();

const rememberMe =ref(false)
const registerFormRef = ref();
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
});

const registerRules = reactive({
  // ... 表单验证规则定义
});

const doRegister = async function () {
  registerFormRef.value.validate(async (valid) => {
    if (!valid) {
      console.log('error submit!');
      return;
    }

    if (registerForm.confirmPassword !== registerForm.password) {
      ElMessage({
        type: 'warning',
        message: '两次输入的密码不一致',
      });
      return;
    }
    
    try {
      let result = await registerApi.postJson("/api/register", registerForm);
      
      if (result.code === 200) {
        // 注册成功
        ElMessage({
          type: 'success',
          message: result.message || '注册成功',
        });
        

          // 注册成功后跳转到登录页面
          router.push("/login");
    
        
        // 注册成功后的其他逻辑...
      } else {
        // 注册失败
        ElMessage({
          type: 'error',
          message: '注册失败，请重试或联系管理员',
        });
      }
    } catch (error) {
      // 注册时发生错误
      ElMessage({
        type: 'error',
        message: '注册时发生错误: ' + error.message,
      });
      console.error('注册时发生错误:', error);
    }
  });
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.register-wrapper {
  width: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}
.register-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直方向上偏上对齐 */
  min-height: 100vh; /* 确保至少占据视口的高度 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.register-wrapper {
  width: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* 可以添加一些顶部内边距来增加偏上的效果 */
  padding-top: 20px; /* 或者使用 margin-top 来调整 */
}

.header {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

/* 其他样式... */
</style>